<template>
  <desc-info-list
    :title="title"
    :data="data"
    :line="line"
    :align="align"
    :size="size"
    :no-line-height="noLineHeight"
    :label-width="labelWidth"
  >
    <slot slot="append" name="tips"></slot>
    <slot name="prepend"></slot>
    <desc-info-list-item
      v-for="(item, index) in colnumInfo"
      :key="index"
      :prop="item.prop"
      :props="item.props"
      :label="item.label"
      :color="item.color"
      :size="item.size"
      :link="item.link"
      :style-label="item.styleLabel"
      :label-color="item.labelColor"
      :type="item.type"
      :value-type="item.valueType"
      :unit="item.unit"
      :spec="item.spec"
      :value="item.value"
      :empty-text="item.emptyText"
      :no-wrap="item.noWrap"
      :column-item-class="item.class"
      :column-num="item.colNum || columnNum"
    >
      <slot :name="item.prop" slot-scope="{ row }" :row="row"></slot>
    </desc-info-list-item>
    <slot name="append"></slot>
  </desc-info-list>
</template>
<script>
export default {
  props: {
    data: { type: [Array, Object], default: () => {} },
    colnumInfo: { type: Array, default: () => [] },
    title: { type: String, default: '' },
    labelWidth: { type: [String, Number], default: '' },
    line: { type: Boolean, default: false },
    align: { type: String, default: '' },
    size: { type: String, default: 'small' },
    columnNum: { type: [String, Number], default: '' },
    noLineHeight: { type: Boolean, default: false }
  }
};
</script>
<style lang="scss">
.flex-start {
  align-items: flex-start !important;
  line-height: 20px;
}
.zeda-grid {
  box-sizing: border-box;
  &-item {
    padding: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  &-label {
    display: inline-block;
    flex-shrink: 0;
    font-weight: 700;
  }
  &-value {
    width: 100%;
    flex-shrink: 1;
  }
  .no-wrap {
    white-space: nowrap;
    width: 100%;
  }
}

.medium {
  font-size: 16px;
}
.small {
  font-size: 14px;
}
.mini {
  font-size: 12px;
}
</style>
